<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>

<spring:message code="trip.id_lbl" var="trip_id"/>
<spring:message code="trip.price" var="price_lbl"/>
<spring:message code="trip.details" var="details_lbl"/>
<spring:message code="trip.accommodations_lbl" var="accommodations_var"/>
<spring:message code="trip.predefined_lbl" var="trip_predefined"/>
<spring:message code="trip.pricesfrom_lbl" var="trip_pricesfrom"/>
<spring:message code="trip.departure_lbl" var="trip_departure"/>
<spring:message code="trip.duration_lbl" var="trip_duration"/>
<spring:message code="trip.transporttype" var="trip_transporttype"/>
<spring:message code="trip.transport" var="trip_transport"/>
<spring:message code="trip.amountpersons" var="trip_amountpersons"/>
<spring:message code="trip.several_lbl" var="trip_several"/>
<spring:message code="trip.days_lbl" var="trip_days"/>
<spring:message code="trip.nights_lbl" var="trip_nights"/>
<spring:message code="trip.amountofnights_lbl" var="trip_amountofnights"/>
<spring:message code="tripbooking.departure_lbl" var="trip_departuredate"/>
<spring:message code="tripbooking.trip_returndate_lbl" var="trip_returndate"/>
<spring:message code="trip.noresult_lbl" var="trip_noresult"/>
<spring:message code="trip.pricesnbooking_lbl" var="trip_pricesnbooking"/>
<spring:message code="trip.backtooverview_lbl" var="trip_backtooverview"/>
<spring:message code="currency_sign" var="currency_sign"/>
<spring:message code="trip.book" var="book_lbl"/>

<c:if test="${not empty tripviewmodel}">
    <c:set var="amount_days" value="${tripviewmodel.trip.amount_nights + 1} ${trip_days}"/>
    <div class="col-md-11"><a style="margin-left:40px" href="index" onclick="history.go(-1);
            event.preventDefault();">${trip_backtooverview}</a>
    </div>

    <div class="predefinedOverview col-md-11 col-centered">
        <div>
            <div style="margin-top: 10px">
                <img style="float:left; margin-top:12px; margin-left:15px" src="../../img/trip/${tripviewmodel.trip.id}.jpg" width="240" />
            </div>
            <div class="col-md-9">
                <div class="col-md-9">
                    <h3>${tripviewmodel.trip.title}</h3>
                </div>
                <div class="col-md-9">
                    <p>
                        <c:forEach var="accommodation" items="${tripviewmodel.accommodations}">
                            ${accommodation.country.name} - ${accommodation.city.name} |
                        </c:forEach>
                    </p>
                </div>
            </div>
            <div class="col-md-9">
                <div class="col-md-10">
                    <p>${tripviewmodel.trip.description}</p>
                </div>
                <div class="col-md-2">
                    <div class="row rightalign">
                        <p style="font-size:14px">${trip_pricesfrom}  ${sign} ${tripviewmodel.trip.price}</p>
                        <p>${trip_departure}: ${trip_several}<br>
                            ${trip_duration}: ${amount_days}
                        </p>
                    </div>
                    <div style="clear:both"></div>
                    <div class="submit"><a class="btn-link" href="${pageContext.request.contextPath}/trip/details/${tripviewmodel.trip.id}#prices">${trip_pricesnbooking}</a></div>
                </div>
            </div>
        </div>
        <div class="col-md-12"><h4>${accommodations_var}</h4>
                <c:forEach var="accommodation" items="${tripviewmodel.accommodations}">
                <div class="predefinedDetails leftalign col-md-4">
                    <div class="col-md-1">
                        <h4>${accommodation.accommodationIndex}.</h4>
                    </div>
                    <div class="col-md-11">
                        <p class="pPredefinedDetails">
                            ${accommodation.title}<br>
                            ${accommodation.country.name} / ${accommodation.city.name}
                        </p>
                        <p class="pPredefinedDetails">${accommodation.description}</p>
                        <p class="pPredefinedDetails">${accommodation.accommodationType.type}</p>
                        <br>
                        <p> ${trip_amountofnights}: ${accommodation.amountOfNights}
                    </div>
                </div>
            </c:forEach>
        </div>
        <div style="clear:both;" id="prices" class="col-md-12">
            <h4>${details_lbl}</h4>
            <div class="col-md-4 col-sm-6">
                <p>${trip_duration}: ${amount_days} (${tripviewmodel.trip.amount_nights} ${trip_nights})<p>
                <p>${trip_transport}: ${trip_transporttype}<p>
                <p>${trip_amountpersons}: ${tripviewmodel.trip.minPersons}
            </div>
            <div class="col-md-3 col-sm-5">
                <p>${trip_departuredate}: </p><input id="datepicker"/>  
                <p id="pickDate" style="color:green;">Kies een datum om te boeken</p>
            </div>
            <div class="col-md-2">
                <p>${trip_returndate}:</p>
                <p id="returnDate"></p>
            </div>
                <div id="bookBtn" class="col-md-2 col-sm-3 submit" onclick="bookTrip(${tripviewmodel.trip.id})">
                <p style="font-size: 14px; padding:10px;" class="btn-link">${book_lbl}</p>
            </div>
        </div>
    </div>

</c:if>
<c:if test="${empty tripviewmodel}">
    <h3>${trip_noresult}</h3>
</c:if>
<script>
    $(document).ready(function () {
        // create DatePicker from input HTML element
        $("#bookBtn").prop("disabled", "true");
        $("#datepicker").kendoDatePicker({
            format: "dd-MM-yyyy",
            onChange: onchange,
            min: new Date()
        });
    });

    function onchange(event) {
        event.preventDefault();
        var datepicker = $("#datepicker").data("kendoDatePicker");
        $("#pickDate").html("");
        $("#bookBtn").prop("disabled", "false");
        getReturnDate(datepicker.value());
    }

    function getReturnDate(date) {
        $.ajax({
            url: window.location.origin + "/reisorg-cust-site/trip/getreturndate?departuredate=" + kendo.toString(date, "dd-MM-yyyy"),
            type: "GET",
            dataType: 'text',
            success: function (data, textStatus, jqXHR) {
                $("#returnDate").text(data);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert("Mislukt om verbinding met server te maken \n" + errorThrown);
            }
        });
    }
    
    function bookTrip(tripId) {
        var datepicker = $("#datepicker").data("kendoDatePicker");
        if (datepicker.value() !== null) {
        window.location.href = window.location.origin + "/reisorg-cust-site/trip/book/" + tripId + "?departuredate=" + kendo.toString(datepicker.value(), "dd-MM-yyyy");
    }
    }
</script>